<!DOCTYPE HTML>
<html>
  <head>
    <title>blah</title>
    <style type='text/css'>
      body p {
        font: sans-serif 11pt black;
      }
      th {
        text-align: right;
      }
      ul li {
        display: inline;
      }
      span.selector {
        background: green;
        color: white;
        cursor: pointer;
        margin: 1px;
        padding: 5px;
      }
    </style>                  
    <script src="js/prototype.js"></script>
    <script src="js/cars.js"></script>
  </head>
  <body>
    <div id='top'>
      <div id='main-nav' class='navigation'>
        <ul>
          <li><span class='selector'>cars</a></li>
          <li><span class='selector'>vendors</a></li>
          <li><span class='selector'>gas purchases</a></li>
          <li><span class='selector'>services and repairs</a></li>
        </ul>
      </div>
    </div>

    <div id='main'> 
      <div id='cars'>
        <h2>List of Cars</h2> 
        <form method='post' id='record-car'>
          <table>
            <tr>
              <th>name:</th>
              <td><input name='carname' size='15' maxlength='25'/></td>
            </tr>
          </table>
          <p><button>record car</button></p>
        </form>

        <div id='cars-in-inventory-paging'></div>
        <div id='cars-in-inventory'>
          <ol>
            <li>car 1; entry 0000-00-00</li>
          </ol>
        </div>
      </div>
 
      <div id='vendors'>
        <h2>List of Vendors</h2>          
        <form method='post' id='record-vendor'>
          <table>                  
            <tr>
              <th>vendor:</th>
              <td><input name='name' size='15' maxlength='25'/></td>
            </tr>                 
            <tr>
              <th>category:</th>
              <td>
                <select name='category'>
                  <option value='gas-purchase'>gas purchase</option>
                  <option value='general-repair'>general repair</option>
                  <option value='body-repair'>body repair</option>
                  <option value='smog-testing'>smog testing</option>
                </select>
              </td>
            </tr>                    
            <tr>
              <th>street:</th>
              <td><input name='street' size='15' maxlength='25'/></td>
            </tr>                     
            <tr>
              <th>city:</th>
              <td><input name='city' size='15' maxlength='25'/></td>
            </tr>                                          
            <tr>
              <th>state:</th>
              <td><input name='state' size='2' maxlength='2'/></td>
            </tr>                                          
            <tr>
              <th>zipcode:</th>
              <td><input name='zipcode' size='10' maxlength='10'/></td>
            </tr>
          </table>
          <p><button>record vendor</button></p>
        </form>     

        <div id='vendors-in-inventory-paging'></div>
        <div id='vendors-in-inventory'>
          <ol>
            <li>vendor 1; category; address</li>
          </ol>
        </div>
      </div>

      <div id='gas-purchases'>
        <h2>Record Gas Purchase</h2>
        <form method='post' id='record-gas-purchase'>
          <table>               
            <tr>
              <th>car</th>
              <td>
                <select name='odometer'>
                  <option>--select car--</option>
                </select>
              </td>
            </tr>               
            <tr>
              <th>odometer</th>
              <td><input name='odometer' size='10' maxlength='12'/></td>
            </tr>       
            <tr>
              <th>miles traveled</th>
              <td><input name='miles' size='5' maxlength='5'/></td>
            </tr> 
            <tr>
              <th>gallons filled</th>
              <td><input name='gallons' size='5' maxlength='5'/></td>
            </tr> 
            <tr>
              <th>price per gallon</th>
              <td><input name='ppg' size='5' maxlength='5'/></td>
            </tr> 
            <tr>
              <th>total bill</th>
              <td><input name='bill' size='5' maxlength='5'/></td>
            </tr> 
            <tr>
              <th>vendor</th>
              <td>
                <select name='miles'>
                  <option>--select vendor--</option>
                </select>
              </td>
            </tr>  
            <tr>
              <th>date</th>
              <td>
                <input name='fillup-date' value='0000-00-00' class='date-selector' size='10' maxlength='10'/>
              </td>
            </tr>
            <tr>
              <th>time</th>
              <td>
                <input name='fillup-time' value='00:00' class='time-selector' size='5' maxlength='5'/>
              </td>
            </tr>
          </table>
        </form>
        <p><button id='record-gas-purchase'>record</button></p>

        <div id='purchases-made-paging'></div>
        <div id='purchases-made'>
          <ol>
            <li>car filled up at vendor on 0000-00-00; xx gallons filled at $xx.xx</li>
          </ol>
        </div>
      </div>

      <div id='services-and-repairs'>
        <h2>Services And Repairs</h2>      

        <div id='services-rendered-paging'></div>
        <div id='services-rendered'>
          <ol>
            <li>car serviced at vendor on 0000-00-00; $xx.xx</li>
          </ol>
        </div>
      </div>

    </div>

    <div id='bottom'>
    </div>
  </body>
</html>
